<template>
  <div class="form-data-table">
    <div class="form-data-export">
      <el-button-group>
        <el-button size="small" :type="markIsExport == 2 ? 'primary' : 'default'" @click="handleIfIsExport(2)">全部</el-button>
        <el-button size="small" :type="markIsExport == 0 ? 'primary' : 'default'" @click="handleIfIsExport(0)">未读</el-button>
        <el-button size="small" :type="markIsExport == 1 ? 'primary' : 'default'" @click="handleIfIsExport(1)">已读</el-button>
      </el-button-group>

      <el-collapse-transition>
        <el-button v-show="selectSiteLists.length > 0" style="margin-left:12px;" size="small" icon="Download" round @click="handleDownload">导出</el-button>
      </el-collapse-transition>
      <el-input style="width:120px" class="margin-left-10" v-model="searchUid" size="small" placeholder="输入uid搜索"/>
      <!-- <el-input style="width:120px" class="margin-left-10" v-model="searchTel" size="small" placeholder="输入电话搜索"/>
      <el-input style="width:120px" class="margin-left-10" v-model="searchUserName" size="small" placeholder="输入用户名搜索"/> -->
      <!-- <el-date-picker
        style="margin-left:12px;"
        v-model="sdate_edate"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']">
    </el-date-picker> -->
      <el-button style="margin-left:12px;" size="small" @click="onSearch">搜索</el-button>
      <el-button style="margin-left:12px;" size="small" @click="onClear">清除</el-button>

      <iframe src="" ref="iframe" style="position:absolute;visibility:hidden;height:0;"></iframe>
    </div>

    <el-table
      v-show="formDataTable.columesList && formDataTable.columesList.length > 0"
      style="width: 100%"
      :data="tableData"
      @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <template
          v-for="(item, index) in formDataTable.columesList" :key="item + '_' + index" >
          <el-table-column
            v-if="item.indexOf('upload') != -1"
            :prop="item"
            :label="'图片' + item.slice(7, item.length)"
            :data-a="index"
            :width=formDataWidthMap[item]>
              <template #default="scope">
                <span :class="{'form-data-item': item == '0_序号', 'new-msg-single': item == '0_序号' && scope.row['is_export'] == 0}">
                  {{ scope.row && scope.row[item] }}
                </span>
                <el-button size="small"
                  @click="onLookImg(scope.column, scope.row)">查看图片</el-button>
              </template>
          </el-table-column>
          <el-table-column
            v-else-if="item.indexOf('img') != -1"
            :prop="item"
            :label="'图片' + item.slice(5, item.length)"
            :data-a="index"
            :width=formDataWidthMap[item]>
              <template #default="scope">
                <span :class="{'form-data-item': item == '0_序号', 'new-msg-single': item == '0_序号' && scope.row['is_export'] == 0}">
                  {{ scope.row && scope.row[item] }}
                </span>
                <el-button size="small" @click="onLookImg(scope.column, scope.row)">查看图片</el-button>
              </template>
          </el-table-column>
          <el-table-column
            v-else-if="item != 'is_export'"
            :prop="item"
            :label="item"
            :data-a="index"
            :width="formDataWidthMap[item]">
              <template #default="scope">
                <span :class="{'form-data-item': item == '0_序号', 'new-msg-single': item == '0_序号' && scope.row['is_export'] == 0}">
                  {{ scope.row && scope.row[item] }}
                </span>
              </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" width="54">
          <template #default="scope">
            <el-button @click.prevent="onMarkRow(scope.$index, tableData)" type="text" size="small">标记</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="54">
          <template #default="scope">
            <el-button @click.prevent="onDeleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-dialog title="预览图片" v-model="dialogVisible" width="60%" :before-close="onClose">
      <el-image :src="previewImgUrl" :preview-src-list="previewImgUrls">
        <template #placeholder>
          <div class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </template>
      </el-image>
    </el-dialog>
    <NoData v-show="!formDataTable.columesList || formDataTable.columesList.length <= 0"></NoData>

    <el-pagination
      v-show="formDataTable.columesList && formDataTable.columesList.length > 0"
      class="pagination"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :page-count="formDataTable.totalPage || 0"
      :current-page="curPage"
      @current-change="onCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
import NoData from '@/views/child/admin/adminData/NoData.vue'
import { mapState, mapActions } from 'vuex'
import { reactive } from 'vue'

const formDataWidthMap = {
  "0_序号": 70,
  "1_uid": 100,
  "2_创建时间": 150,
  "is_export": 30,
}
export default {
  setup () {
    const state =  reactive({
      selectSiteLists: [],  // 勾选项
      previewImgUrls: [],
      dialogVisible: false,
      previewImgUrl: '',
      markIsExport: 2,  // 已读：1 / 未读：0 / 全部：2
      searchUid: '',
      searchTel: '',
      searchUserName: '',
    })
    const state_ = {
      curPage: 1,
      pageSize: 20,
      sdate_edate: '',
      pickerDate: null,
      formDataWidthMap: formDataWidthMap,
    }
    _.merge(state, state_)
    return state
  },
  components: {
    NoData,
  },
  computed: {
    ...mapState({
      formDataTable: state => state.user.formDataTable,
    }),
    tableData(){
      // return this.formDataTable.siteList;
      let searchUid = this.searchUid.trim();
      return this.formDataTable.siteList && this.formDataTable.siteList.filter(data => !searchUid || data['1_uid'] == searchUid);
    },
  },
  beforeMount() {
    this.getFormDataList(this.$route.query.site_id, this.curPage, this.pageSize);
  },
  mounted(){},
  methods:{
    ...mapActions({
      getFormDataTable: 'user/getFormDataTable',
      markFormItem: 'user/markFormItem',
      deleteFormItem: 'user/deleteFormItem',
      exportData: 'user/exportData',
      updateFormDataTable: 'user/updateFormDataTable',
    }),
    onMarkRow(index, rows) {
      this.markFormItem({site_id: this.$route.query.site_id, id:rows[index]['0_序号'], index});
    },
    onDeleteRow(index, rows) {
      this.deleteFormItem({site_id: this.$route.query.site_id, id:rows[index]['0_序号'], index});
    },
    onClose() {
      this.previewImgUrl = '';
      this.previewImgUrls[0] = '';
      this.dialogVisible = false;
    },
    onLookImg(column, row){
      this.dialogVisible = true;
      this.previewImgUrl = row[column.property];
      this.previewImgUrls[0] = this.previewImgUrl;
    },
    getFormDataList(site_id, page, pageSize, is_export){
      //uid  sdate edate
      this.getFormDataTable({
        site_id: site_id,
        page: page,
        pageSize: pageSize,
        is_export: is_export == 2 ? '' : is_export,
        uid: this.searchUid,
        tel: this.searchTel,
        name: this.searchUserName,
        sdate: this.sdate_edate[0] ? this.sdate_edate[0] : '',
        edate: this.sdate_edate[1] ? this.sdate_edate[1] : '',
      });
    },
    onSearch(){
      this.getFormDataList(this.$route.query.site_id, this.curPage, this.pageSize, this.markIsExport);
    },
    onClear(){
      this.onCurrentChange(1);
    },
    onCurrentChange(val) {
      this.searchUid = '';
      this.searchTel = '';
      this.searchUserName = '';
      this.searchUid = '';
      this.sdate_edate = '';
      this.curPage = val;
      this.getFormDataList(this.$route.query.site_id, this.curPage, this.pageSize, this.markIsExport);
    },
    handleSelectionChange(val) {
      // 暂存勾选项
      this.selectSiteLists = [...val];
    },
    handleDownload() {
      // 根据 ids 导出数据
      let selectIds = '';
      const idLists = this.selectSiteLists && this.selectSiteLists.map(item => {
        return item['0_序号'];
      });
      if(idLists.length <= 0) return;
      selectIds = idLists.join(',');
      this.$refs.iframe.src = this.env.apiUrl + '/stat/expdata?site_id=' + this.formDataTable.site_id + '&table=com_form&ids=' + selectIds;

      // 更新 formDataTable
      // const newSelectLists = this.selectSiteLists.filter((item) => {
      //   item['is_export'] = '1';
      //   return item;
      // });
      this.updateFormDataTable(this.selectSiteLists);
    },
    handleIfIsExport(is_export) {
      this.markIsExport = is_export;
      this.curPage = 1;
      this.getFormDataList(this.$route.query.site_id, this.curPage, this.pageSize, is_export);
    },
  }
}
</script>
<style lang='scss' scope>
  .el-range-editor.el-input__inner, .el-date-editor .el-range-separator, .el-date-editor .el-range__icon{
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    font-size: 12px;
    padding: 0;
  }
  .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner{
    width: 340px;
  }
  .el-image{
    width: 100%;
  }
  .image-slot{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-image__error, .el-image__inner, .el-image__placeholder{
    object-fit: contain;
    height: 500px;
  }
  .form-data-table{
    padding-bottom:30px;

    .el-table{
      font-size:12px;
      box-shadow: 0 2px 4px rgba(18, 123, 255, 0.1);

      .el-table__header {
        tr {
          background-color: #e4e7eb;

          th:first-child::before {
            display: none;
          }
        }

        th {
          font-size: 14px;
          background-color: #e4e7eb;
          color: #43475c;
          font-weight: normal;
        }
      }

      .el-table__header, .el-table__body {
        tr {
          position: relative;

          td:nth-child(1) , th:nth-child(1) {
            div {
              text-align: center;
            }
          }
        }
      }
    }

    .pagination{
      text-align: center;
      margin-bottom: 15px;
      margin-top: 45px;
    }
  }

  .form-data-export {
    padding-bottom: 10px;
  }

  .new-msg-single {
    position: relative;
    // display: block;
    // background-color: rgba(255, 0, 0, .2);
  }
  .new-msg-single::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 105%;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #ff0000;
  }
</style>
